<template>
	<view>
		<view class="topsegment2">
			<u-subsection :list="items" :current="current" @change="onClickItem" mode="tabs" active-color="#000"></u-subsection>
		</view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==0">
			<view class="hdItems">
				<view class="hdItem" v-for="(item, index) in info" :key="index">
					<image class="background" :src="'../../static/test/' + (5 - index) + '.jpg'"></image>
					<view class="tag">
						<view class="title">#街舞随手拍</view>
						<view class="pop">
							<image class="icon" src="../../static/imgs/index/sy_hdcy@2x.png">{{(index + 1) * 5}}人参与
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==1">
			<view class="hdItems">
				<view class="hdItem" v-for="(item, index) in info" :key="index">
					<image class="background" :src="'../../static/test/' + (3 + index) + '.jpg'"></image>
					<view class="tag">
						<view class="title">#街舞随手拍</view>
						<view class="pop">
							<image class="icon" src="../../static/imgs/index/sy_hdcy@2x.png">{{(index + 1) * 5}}人参与
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="searchpopup" type="center" @change="handlerPopupStatusChenge">
			<view id="searchpopup">
				<uni-search-bar class="mysearchBar" radius="100" bgColor="#EEEEEE" placeholder="搜索活动" @confirm="search"/>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {uniPopup},
		data() {
			return {
				showSearchPopup: false,
				kouling: '',
				current: 0,
				items: ['热门', '最新'],
				info: [1, 2, 3]
			}
		},
		methods: {
			onClickItem: function(e) {
				if (this.current !== e) {
					this.current = e;
				}
			},
			handlerPopupStatusChenge: function(e) {
				this.showSearchPopup = e.show;
			},
			search(res) {
				this.$refs['searchpopup'].close();
			},
		},
		onBackPress(e) {
			if (this.showSearchPopup) {
				this.$refs['searchpopup'].close();
				return true;
			}
		},
		onNavigationBarButtonTap (e) {
			this.$refs['searchpopup'].open();
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.topsegment2 {
		/deep/ .segmented-control__text {
			color: #989898 !important;
		}
	}

	.scrollY {
		// #ifdef APP-PLUS
		height: calc(100vh - 38px);
		// #endif
		// #ifdef H5
		height: calc(100vh - 44px - 38px);

		// #endif
		.innerContent {
			padding: 0 10pt;
			width: calc(100% - 20pt);
		}
	}

	.hdItems {
		padding: 10pt;
	}

	.hdItem {
		position: relative;
		width: 100%;
		height: 420rpx;
		margin-right: 10pt;
		margin-bottom: 20px;

		.background {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

		.tag {
			position: absolute;
			width: 180px;
			height: 50px;
			bottom: 20px;
			right: 0;
			padding: 5px 5pt 6px 10pt;
			background: rgba(39, 37, 34, 0.9);
			z-index: 2;
			color: #fff;

			&::before {
				z-index: -1;
				content: '';
				width: 0;
				height: 0;
				border-top: 60px solid rgba(39, 37, 34, 0.9);
				border-left: 20px solid transparent;
				position: absolute;
				top: 0;
				left: -20px;
			}

			.title {
				text-align: left;
				font-size: 13px;
				margin-left: -10px;
			}

			.pop {
				text-align: right;
				font-size: 12px;
				color: #aeacab;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.icon {
					width: 16px;
					height: 16px;
					margin-right: 2px;
				}
			}
		}
	}
	#searchpopup {
	  background: #fff;
	  width: 300px;
	  border-radius: 10px;
	  height: 40px;
	  position: absolute;
	  left: calc(50% - 150px);
	  top: calc(50% - 20px);
	}
</style>
